/**
    高级搜索组件
        底部弹出的搜索组件
        和后端商讨过字典都是code和name，搜索组件没有做配置项

        props
            value[boolean = false] * 组件是否显示v-model绑定
            title[string = '筛选'] 组件的标题 设置空的话×也没有了
            searchData[array = []] 搜索的数据
            autoClose[boolean = true] 操作底部btn后自动关闭组件
            submitText[string = '确定'] 确定的文本
            resetText[string = '重置'] 重置的文本

            searchData 说明
                单选
                {
                    type: 'radio', // 搜索类型
                    label: '是否已接入视频', // 搜索名称
                    arr: [ // 数组
                        {
                            name: '是', // 显示文本 后端说是固定name和code字段 所以没有设置配置项
                            code: 'hasCamera' // 值
                        }
                    ],
                    check: '', // 选中的code
                    key: 'cameraStatus' // 搜索的字段名
                }

                多选
                {
                    type: 'checkbox', // 搜索类型
                    label: '项目类别', // 搜索名称
                    arr: [ // 数组
                        {
                            name: '项目类别1', // 显示文本 后端说是固定name和code字段 所以没有设置配置项
                            code: 'val1' // 值
                        }
                    ],
                    check: [], // 选中的code
                    key: 'cameraStatus' // 搜索的字段名
                }

        emit
            btn:click 操作底部btn触发
                type[string] search => 搜索  reset => 重置
                data[object] 搜索的对象
 */

<template>
    <van-popup overlay-class="v-advanced-search"
               v-model="visible"
               round
               position="bottom"
               get-container="body">
        <div class="v-advanced-contnet">
            <header v-if="title">
                <span>{{title}}</span>
                <van-icon name="cross"
                          @click.native.stop="fnColse()" />
            </header>

            <ul>
                <template v-for="(item, index) in searchData">
                    <!-- 单选 -->
                    <template v-if="item.type == 'radio'">
                        <li :key="index"
                            class="v-radio-li">
                            <h4>{{item.label}}</h4>
                            <div class="v-radio-content">
                                <template v-for="(arrItem, arrIndex) in item.arr">
                                    <span class="select-item"
                                          :class="{'active': arrItem.code == item.check}"
                                          @click.stop="fnRadioItem(item, arrItem)"
                                          :key="arrIndex">{{arrItem.name}}</span>
                                </template>
                            </div>
                        </li>
                    </template>
                    <!-- 单选 end -->

                    <!-- 多选 -->
                    <template v-if="item.type == 'checkbox'">
                        <li :key="index"
                            class="v-checkbox-li">
                            <h4>{{item.label}}</h4>
                            <div class="v-checkbox-content">
                                <template v-for="(arrItem, arrIndex) in item.arr">
                                    <span class="select-item"
                                          :class="{'active': item.check.some(code => code == arrItem.code)}"
                                          @click.stop="fnCheckboxItem(item, arrItem)"
                                          :key="arrIndex">{{arrItem.name}}</span>
                                </template>
                            </div>
                        </li>
                    </template>
                    <!-- 多选 end -->
                </template>
            </ul>

            <footer>
                <div @click="fnReset()">
                    <van-icon name="brush-o" />
                    <span>{{resetText}}</span>
                </div>
                <span @click="fnSubmit()">{{submitText}}</span>
            </footer>
        </div>
    </van-popup>
</template>

<script>
export default {
    props: {
        // 组件是否显示
        value: {
            type: Boolean,
            default: false,
            required: true
        },
        // 弹窗标题
        title: {
            type: String,
            default: '筛选'
        },
        // 搜索数据
        searchData: {
            type: Array,
            default: _ => ([])
        },
        // searchData初始化完成
        searchDataInit: {
            type: Boolean,
            default: false
        },
        // 操作底部btn后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true
        },
        // 确定的文本
        submitText: {
            type: String,
            default: '确定'
        },
        // 重置的文本
        resetText: {
            type: String,
            default: '重置'
        }
    },
    data () {
        return {

        }
    },
    computed: {
        visible: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        }
    },
    methods: {
        // 关闭组件
        fnColse () {
            this.visible = false
        },
        // 单选item点击
        fnRadioItem (item, arrItem) {
            if (item.check == arrItem.code) { // 当前是选中状态
                item.check = ''
            } else {
                item.check = arrItem.code
            }
        },
        // 多选item点击
        fnCheckboxItem (item, arrItem) {
            let index = item.check.findIndex(code => {
                return code == arrItem.code
            })

            if (index == -1) { // 当前是未选中状态
                item.check.push(arrItem.code)
            } else {
                item.check.splice(index, 1)
            }
        },
        // 重置
        fnReset () {
            this.searchData.map(item => {
                if (item.type == 'radio') {
                    item.check = ''
                }

                if (item.type == 'checkbox') {
                    item.check = []
                }
            })

            let obj = this.fnCreateParams()

            this.$emit('btn:click', {
                type: 'reset',
                data: obj
            })
            this.autoClose && this.fnColse()
        },
        // 提交
        fnSubmit () {
            let obj = this.fnCreateParams()

            this.$emit('btn:click', {
                type: 'search',
                data: obj
            })
            this.autoClose && this.fnColse()
        },
        // 创建搜索obj
        fnCreateParams () {
            let obj = {}

            // 筛选非空值
            this.searchData.map(item => {
                // 单选
                if (item.type == 'radio') {
                    // if (item.check != '') {
                    obj[item.key] = item.check
                    // }
                }

                // 多选
                if (item.type == 'checkbox') {
                    // if (item.check.length > 0) {
                    // 后端不接受array   需要用,号拼接
                    obj[item.key] = item.check.join(',')
                    // }
                }
            })

            return obj
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.v-advanced-contnet {
    min-height: 40vh;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    > header {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 60px;
        position: relative;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        line-height: 23px;

        .van-icon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 26px;
            margin: auto;
            width: 15px;
            height: 15px;
            color: #61677a;
        }
    }

    > footer {
        flex-shrink: 0;
        height: 79px;
        display: flex;
        align-items: center;

        > div {
            padding: 0 35px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            color: #0f1826;

            .van-icon {
                font-size: 24px;
            }
        }

        > span {
            flex: 1;
            height: 48px;
            background: #3385ff;
            border-radius: 24px;
            color: #fff;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    span.select-item {
        font-size: 14px;
        font-weight: 400;
        color: #61677a;
        line-height: 20px;
        background: #f5f7fa;
        border-radius: 4px;
        padding: 8px 15px;
        margin: 0 10px 12px 0;

        &.active {
            background: rgba(51, 133, 255, 0.08);
            color: #3b7ffa;
        }
    }

    ul {
        flex: 1;
        overflow-y: auto;
        margin: 0;
        padding: 0 20px 20px;

        li {
            display: flex;
            flex-direction: column;

            & + li {
                margin-top: 10px;
            }

            > h4 {
                font-size: 16px;
                font-weight: 500;
                color: #0f1826;
                line-height: 23px;
                padding: 8px 0 15px;
                margin: 0;
            }

            .v-radio-content,
            .v-checkbox-content {
                display: flex;
                flex-wrap: wrap;
            }
        }
    }
}
</style>
